<template>
  <el-row class="overdue-clients">
    <!--<el-col :span="24">-->
      <!--<div class="overdule-block">-->
        <!--<div class="overdue-title-r">分行业贷款额</div>-->
      <!--</div>-->
    <!--</el-col>-->
    <el-col :span="24">
      <div class="overdue-title">分行业贷款额</div>
      <!-- <div ref="chart" style="width: 100%;height:220%;"></div> -->
	  <div ref="chart" style="width: 600px;height:220%;"></div>
    </el-col>
  </el-row>
</template>

<script type="text/babel" scoped>
import echarts from 'echarts'

export default {
  props: {
    industryData: {
      type: Array
    }
  },

  filters: {
    fixnum: function (value) {
      return (value || 0).toFixed(2)
    }
  },

  data () {
    return {
      chart: '',
      pieData: [],
      legendData: []
    }
  },
  // 创建Echarts图表
  mounted () {
    this.industryData.forEach((item, index) => {
      if (index === 0) {
        this.pieData.push({value: item.loanMoney, name: item.industryName, stockcode: item.stockCode, selected: true})
      } else {
        this.pieData.push({value: item.loanMoney, name: item.industryName, stockcode: item.stockCode})
      }
    })
    this.legendData = this.pieData.sort(function (a, b) {
      return b.value - a.value
    })
    this.$emit('click-item', this.pieData[0].name, this.pieData[0].stockcode)
    this.createChart()
  },
  // 具体图表内容信息
  methods: {
    toThousands (num) {
      return (num || 0).toString().replace(/\d+/, function (n) {
        let len = n.length
        if (len % 3 === 0) {
          return n.replace(/(\d{3})/g, ',$1').slice(1)
        } else {
          return n.slice(0, len % 3) + n.slice(len % 3).replace(/(\d{3})/g, ',$1')
        }
      })
    },
    createChart () {
      var that = this
      this.chart = echarts.init(this.$refs.chart)
      const option = {
        tooltip: {
          padding: [8, 15, 8, 15],
          trigger: 'item',
          formatter: function (value) {
            // console.log(value)
            return value.data.name + '<br/>' + value.percent + '%' + ' | ' + '￥' + that.toThousands(value.data.value) + '元'
          }
        },
        legend: [{
          // selectedMode:false,
          orient: 'vertical',
          height: '80%',
          top: '7%',
          itemWidth: 7,
          itemHeight: 7,
          align: 'left',
          itemGap: 25,
          x: '45%',
          icon: 'circle',
          data: this.legendData.length >= 10 ? this.legendData.slice(0, 10) : this.legendData,
          formatter: function (e) {
			console.log('e',e)
			console.log('option',option)
            let total = 0
            for (let i = 0; i < option.series[0].data.length; i++) {
              total += option.series[0].data[i].value
            }
            for (let i = 0; i < option.series[0].data.length; i++) {
              let ePercent = (option.series[0].data[i].value / total * 100).toFixed(2) + '%'
              if (option.series[0].data[i].name === e) {
                // return e + ' ' + option.series[0].data[i].value + ' ' + ePercent
                return e + '    ' + ePercent
              }
            }
          }
        }],
        color: ['#48abf6', '#5187bf', '#87cdc3', '#ffda26', '#f2bfa8', '#5d6f90', '#91c7ae'],
        calculable: true,
        // title: {
        //   text: '分行业贷款额',
        //   top: 'middle',
        // left: '14%',
        //   textStyle: {
        //     fontSize: 15,
        //   }
        // },
        series: [
          {
            name: '行业',
            type: 'pie',
            selectedMode: 'single',
            radius: ['70%', '90%'],
            center: ['22%', '49%'],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                borderColor: '#fff',
                borderWidth: 2
              },
              emphasis: {
                label: {
                  show: false,
                  position: 'center',
                  textStyle: {
                    fontSize: '20',
                    fontWeight: 'bold'
                  }
                }
              }
            },
            animation: false,
            data: this.pieData
          }
        ]
      }
      this.chart.setOption(option)
      window.removeEventListener('resize', this.resizeChart)
      window.addEventListener('resize', this.resizeChart)
      // 点击某行业获取行业信息
      this.chart.on('click', function (params) {
        console.log('params',params)
        that.$emit('click-item', params.data.name, params.data.stockcode)
      })
      //  点击legend自定义事件
      let myChart = this.chart
      myChart.on('legendselectchanged', function (obj) {
        let selected = obj.selected
        let legend = obj.name
        console.log(obj)
        selected[legend] = true
        myChart.dispatchAction({
          type: 'legendSelect',
          // 图例名称
          name: legend
        })
        let stockcode
        that.pieData.forEach((item, index) => {
          if (item.name === legend) {
            stockcode = item.stockcode
          }
        })
        // console.log(that.pieData)
        that.$emit('click-item', legend, stockcode)
      })
    },
    resizeChart () {
      if (this.chart) {
        this.chart.resize()
      }
    }
  },
  watch: {

  },
  // 销毁参数
  destroyed () {
    this.chart = null
  }
}
</script>
<style  scoped>
   .overdue-title{
        width:47%;
		text-align:center;
	    font-size:15px;
		font-weight:bolder;
		position:absolute;
		z-index:999;
		top:47%;
		left:-36px
   }
   
</style>



